<template>
  <div class="third_con">
    <p class="first_title">恭喜您抽中三等奖</p>

    <div class="third_zone">
      <div class="red_pocket">
        {{ prizeDetail.price }}元 {{ prizeDetail.prizeName }}
      </div>
      <div class="red_limit">
        {{ prizeDetail.subTitle }}
        <div class="overlook_red" @click="toRed">
          查看红包
        </div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { toRedPocket } from "@/utils/util";
export default {
  computed: {
    memberDetail() {
      return this.$store.state.mainPage.memberDetail;
    },
    prizeDetail() {
      return this.memberDetail.prizeDetail;
    }
  },
  methods: {
    toRed() {
      toRedPocket();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.third_con {
  text-align: center;

  .third_zone {
    margin: 66px auto 30px auto;
    border: 1px solid #fca293;
    // opacity: 0.38;
    background: #ffe9e1;
    border-radius: 20px;
    padding: 35px 27px 35px 52px;
    text-align: left;

    .red_pocket {
      font-size: 40px;
      font-weight: bold;
      color: #853215;
    }

    .red_limit {
      font-size: 24px;
      font-weight: bold;
      color: #8a3a1f;
      // margin-top: 19px;
      @include flex_config(space-between, flex-end, row);
    }

    .overlook_red {
      width: 141px;
      height: 49px;
      line-height: 49px;
      text-align: center;
      background: #fe0000;
      border-radius: 25px;

      font-size: 24px;
      font-weight: bold;
      color: #fefefe;
    }
  }
}
</style>
